<template>
    <div>
      <yd-flexbox class="headerbg">
        <div class="headerphoto">
          <span class="headerspan">
            <svg class="headerphotoimg">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default">
                <svg viewBox="0 0 122 122" id="avatar-default" width="100%" height="100%">
                  <path fill="#DCDCDC" fill-rule="evenodd" d="M61 121.5c33.413 0 60.5-27.087 60.5-60.5S94.413.5 61 .5.5 27.587.5 61s27.087 60.5 60.5 60.5zm12.526-45.806c-.019 3.316-.108 6.052.237 9.825 3.286 8.749 18.816 9.407 28.468 17.891-1.833 1.998-6.768 6.788-15 10.848-7.02 3.463-16.838 6.416-24.831 6.416-17.366 0-32.764-7.149-42.919-17.264 9.713-8.407 25.49-9.173 28.769-17.891.345-3.773.258-6.509.24-9.825l-.004-.002c-1.903-.985-5.438-7.268-6.01-12.571-1.492-.12-3.843-1.561-4.534-7.247-.37-3.053 1.107-4.77 2.004-5.31-5.046-19.212 1.507-33.16 20.749-34.406 5.753 0 10.18 1.52 11.909 4.523 15.35 2.702 11.756 22.658 9.328 29.882.899.54 2.376 2.258 2.004 5.31-.689 5.687-3.042 7.127-4.534 7.248-.575 5.305-3.25 10.82-5.873 12.57l-.003.003zM61 120.5C28.14 120.5 1.5 93.86 1.5 61S28.14 1.5 61 1.5s59.5 26.64 59.5 59.5-26.64 59.5-59.5 59.5z"></path>
                </svg>  
              </use>
            </svg>
          </span>
        </div>
        <yd-flexbox-item class="headertext" v-if="islogin">
          <p>
            <span class="headerm">{{user.mobile}}</span>
          </p>
        </yd-flexbox-item>
        <yd-flexbox-item class="headertext" v-else>
          <p>
            <router-link to="/Login">登录</router-link>
            /<a href="#">注册</a>
          </p>
          <p>登录后享受更多优惠</p>
        </yd-flexbox-item>
        <div class="arrowd">
          <svg fill="#fff">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right">
              <svg viewBox="0 0 1024 1024" id="arrow-right" class="icon" width="100%" height="100%">
                <path d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z" class="selected"></path>
              </svg>
            </use>
          </svg>
        </div>
      </yd-flexbox>
      <yd-cell-group>
        <yd-cell-item arrow href="#" type="link">
            <yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
            <span slot="left">创建时间{{creattime | time}}</span>
            <span slot="right">过滤器用法
              <!-- 小图标使用方式 -->
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#hd-icon-yuan"></use>
              </svg>
            </span>
        </yd-cell-item>
        <yd-cell-item arrow href="#" type="link">
            <yd-icon slot="icon" name="like-outline" size=".42rem"></yd-icon>
            <span slot="left">我的收藏</span>
        </yd-cell-item>
      </yd-cell-group>
    </div>
</template>

<script>
// import '@/filter'

export default {
  name: 'MyInfo',
  data () {
    return {
      islogin: false,
      user: {
        mobile: ''
      },
      creattime: ''
    }
  },
  // 页面初始化完成
  mounted: function () {
    let User = this.store.get(this.STORECONST.USERINFO)
    if (User) {
      this.islogin = true
      // 获取用户信息
      this.hdAjax({
        url: this.API.getUserInfoById,
        success: (res) => {
          /**
           * 方式一: 预定义data结构,然后可以操作data
           * 方式二: 动态结构this.$set(this.user, 'mobile', res.data.mobile)
           * 如果使用动态的 data 赋值,需要使用 this.$set 方式 参考 https://cn.vuejs.org/v2/guide/reactivity.html
           */
          this.user.mobile = res.data.mobile
        }
      })
    } else {
      alert('没找到哦')
    }
    this.creattime = new Date()
  }
}
</script>

<style scoped>
    .headerbg{
      background-image: linear-gradient(90deg,#0af,#0085ff);
      padding:.8rem .2rem;
    }
    .headerm{
      font-size: .37rem
    }
    .headerphotoimg{
      border-radius: 50%;
      width: 1.4rem;
      height: 1.4rem;
    }
    .headertext{
      padding-left: .3rem;
      font-size: .3rem;
      color: #ffffff;
      flex-grow: 1
    }
    .img-responsive {
      display: inline-block;
      height: auto;
      max-width: 100%;
    }
    .headerspan{
      background-color: #ffffff;
      border-radius: 50%;
      line-height: 1.2rem;
      font-size: 1.7rem;
      display: inline-block;
      vertical-align: middle;
    }
    .arrowd svg{
      width: .29rem;
      height: .3rem
    }
</style>